<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>汪哥版</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/index.css" />
  </head>

  <body style="height: 1000px">
    <!--包裹器   整个页面的容器-->
    <div class="wrap">
      <!--窗口侧边栏-->
      <div class="toolBar toolWrap">
        <!--内容容器-->
        <div class="content"></div>
        <!--面包屑-->
        <div class="but list"></div>
        <!--中间列表-->
        <ul class="toolList">
          <li>
            <i class="tabIcon vip"></i>
            <em>尚品汇员</em>
          </li>
          <li>
            <i class="tabIcon cart"></i>
            <em>购物车</em>
          </li>
          <li>
            <i class="tabIcon follow"></i>
            <em>我的关注</em>
          </li>
          <li>
            <i class="tabIcon history"></i>
            <em>历史记录</em>
          </li>
          <li>
            <i class="tabIcon message"></i>
            <em>消息</em>
          </li>
          <li>
            <i class="tabIcon qus"></i>
            <em>咨询</em>
          </li>
        </ul>
        <!--回到顶部-->
        <div class="back">
          <i class="tabIcon"></i>
          <em></em>
        </div>
      </div>
      <!-- 头部区域 -->
      <header class="header">
        <!--头部第一行-->
        <div class="top">
          <div class="container">
            <!--登录-->
            <div class="login">
              <p>尚品汇欢迎您！</p>
              <p>
                <span>请</span>
                <a href="###">登录</a>
                <a href="###" class="register">免费注册</a>
              </p>
            </div>
            <!--头部导航-->
            <div class="headerNav">
              <a href="###">我的订单</a>
              <a href="###">我的购物车</a>
              <a href="###">我的尚品汇</a>
              <a href="###">尚品汇会员</a>
              <a href="###">企业采购</a>
              <a href="###">关注尚品汇</a>
              <a href="###">合作招商</a>
              <a href="###">商家后台</a>
            </div>
          </div>
        </div>
        <!--头部第二行-->
        <div class="bottom">
          <h1 class="logoArea">
            <a href="###">
              <img src="img/Logo.png" alt="尚品汇" />
            </a>
          </h1>
          <div class="searchArea">
            <form action="">
              <input type="text" />
              <button>搜索</button>
            </form>
          </div>
        </div>
      </header>
      <!--商品导航分类-->
      <div class="typeNav">
        <div class="container">
          <h2 class="all">全部商品分类</h2>
          <nav>
            <a href="###">服装城</a>
            <a href="###">美妆馆</a>
            <a href="###">尚品汇超市</a>
            <a href="###">全球购</a>
            <a href="###">闪购</a>
            <a href="###">团购</a>
            <a href="###">有趣</a>
            <a href="###">秒杀</a>
          </nav>
        </div>
      </div>
      <!--商品主要内容区域-->
      <section class="con">
        <!--路径导航（面包屑导航）-->
        <div class="conPoin">
          <!-- <a href="###">手机、数码、通讯</a>
          <a href="###">手机</a>
          <a href="###">Apple苹果</a>
          <a>iphone 6S系类</a> -->
        </div>
        <!--主要内容区域-->
        <div class="mainCon">
          <!--左侧放大镜-->
          <div class="previewWrap">
            <!--放大镜效果-->
            <div class="preview">
              <!--小图-->
              <div class="zoom">
                <!-- <img src="img/s1.png" alt=""> -->
              </div>
              <!--大图-->
            </div>
            <!--缩略图效果-->
            <div class="specScroll">
              <a class="prev">&lt;</a>
              <div class="itemCon">
                <ul class="list">
                  <!-- <li><img src="img/s1.png" alt=""></li>
                <li><img src="img/s2.png" alt=""></li>
                <li><img src="img/s3.png" alt=""></li>
                <li><img src="img/s1.png" alt=""></li>
                <li><img src="img/s2.png" alt=""></li>
                <li><img src="img/s3.png" alt=""></li>
                <li><img src="img/s1.png" alt=""></li>
                <li><img src="img/s2.png" alt=""></li> -->
                </ul>
              </div>
              <a class="next">&gt;</a>
            </div>
          </div>
          <!--右侧商品信息-->
          <div class="infoWrap">
            <div class="info1"></div>
            <div class="choose">
              <div class="chooseArea">
                <div class="choosed"></div>
              </div>
              <div class="carWrap">
                <div class="controls">
                  <input type="text" value="1" />
                  <a href="###" class="plus">+</a>
                  <a href="###" class="mins">-</a>
                </div>
                <div class="addBtn">
                  <a href="###">加入购物车</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!--商品详情页-->
      <section class="productDetail">
        <!--侧边栏-->
        <aside class="aside">
          <!--选项卡切换的按钮-->
          <div class="tabWrap">
            <h4 class="active">相关分类</h4>
            <h4>推荐品牌</h4>
          </div>
          <!--选项卡内容-->
          <div class="tabContent">
            <div class="active">
              <ul class="partList">
                <li>手机</li>
                <li>手机壳</li>
                <li>内存卡</li>
                <li>iphone配件</li>
                <li>贴膜</li>
                <li>手机耳机</li>
                <li>移动电源</li>
                <li>平板电脑</li>
              </ul>
              <ul class="goodsList">
                <li>
                  <div class="gImg">
                    <img src="img/part01.png" alt="" />
                  </div>
                  <p class="attr">Apple苹果iPhone 6s (A1699)</p>
                  <p class="price">¥6088.00</p>
                  <div class="addCar">
                    <a href="###">加入购物车</a>
                  </div>
                </li>
                <li>
                  <div class="gImg">
                    <img src="img/part02.png" alt="" />
                  </div>
                  <p class="attr">Apple苹果iPhone 6s (A1699)</p>
                  <p class="price">¥6088.00</p>
                  <div class="addCar">
                    <a href="###">加入购物车</a>
                  </div>
                </li>
                <li>
                  <div class="gImg">
                    <img src="img/part03.png" alt="" />
                  </div>
                  <p class="attr">Apple苹果iPhone 6s (A1699)</p>
                  <p class="price">¥6088.00</p>
                  <div class="addCar">
                    <a href="###">加入购物车</a>
                  </div>
                </li>
                <li>
                  <div class="gImg">
                    <img src="img/part01.png" alt="" />
                  </div>
                  <p class="attr">Apple苹果iPhone 6s (A1699)</p>
                  <p class="price">¥6088.00</p>
                  <div class="addCar">
                    <a href="###">加入购物车</a>
                  </div>
                </li>
              </ul>
            </div>
            <div>推荐品牌</div>
          </div>
        </aside>
        <div class="detail">
          <div class="fitting">
            <h4>选择搭配</h4>
            <div class="goodSuits">
              <div class="master">
                <img src="img/l-m01.png" alt="" />
                <p>¥5299</p>
                <i>+</i>
              </div>
              <ul class="suits">
                <li class="suitsItem">
                  <img src="img/dp01.png" alt="" />
                  <p>Feless费勒斯VR</p>
                  <label>
                    <input type="checkbox" value="39" />
                    <span>39</span>
                  </label>
                </li>
                <li class="suitsItem">
                  <img src="img/dp02.png" alt="" />
                  <p>Feless费勒斯VR</p>
                  <label>
                    <input type="checkbox" value="39" />
                    <span>39</span>
                  </label>
                </li>
                <li class="suitsItem">
                  <img src="img/dp03.png" alt="" />
                  <p>Feless费勒斯VR</p>
                  <label>
                    <input type="checkbox" value="39" />
                    <span>39</span>
                  </label>
                </li>
                <li class="suitsItem">
                  <img src="img/dp04.png" alt="" />
                  <p>Feless费勒斯VR</p>
                  <label>
                    <input type="checkbox" value="39" />
                    <span>39</span>
                  </label>
                </li>
              </ul>
              <div class="result">
                <div>已选购0件商品</div>
                <p class="price-tit">套餐价</p>
                <p class="price">¥5299</p>
                <button>加入购物车</button>
              </div>
            </div>
          </div>
          <div class="intro">
            <ul class="tabWrap">
              <li class="active"><a href="###">商品介绍</a></li>
              <li><a href="###">规格与包装</a></li>
              <li><a href="###">售后保障</a></li>
              <li><a href="###">商品评价</a></li>
              <li><a href="###">手机社区</a></li>
            </ul>
            <div class="tabContent">
              <div class="active">
                <ul class="goodsIntro">
                  <li>分辨率：1920*1080(FHD)</li>
                  <li>后置摄像头：1200万像素</li>
                  <li>前置摄像头：500万像素</li>
                  <li>核 数：其他</li>
                  <li>频 率：以官网信息为准</li>
                  <li>品牌： Apple</li>
                  <li>商品名称：APPLEiPhone 6s Plus</li>
                  <li>商品编号：1861098</li>
                  <li>商品产地：中国大陆</li>
                  <li>商品毛重：0.51kg</li>
                  <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                </ul>
                <div class="introImg">
                  <img src="img/intro01.png" alt="" />
                  <img src="img/intro02.png" alt="" />
                  <img src="img/intro03.png" alt="" />
                </div>
              </div>
              <div>规格与包装</div>
              <div>售后保障</div>
              <div>商品评价</div>
              <div>手机社区</div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <script src="./js/data.js"></script>
    <script>
      window.addEventListener('DOMContentLoaded', function () {
        initCrumbs()
      })

      // 初始化面包屑导航数据
      function initCrumbs() {
        var crumbsData = goodData.path
        var htmlStr = ''
        crumbsData.forEach(function (item, index) {
          // 最后一项不需要给a链接设置href属性
          if (index !== crumbsData.length - 1) {
            console.log('index:', index)
            htmlStr += `<a href='${item.url}'>${item.title}</a>`
          } else {
            // 最后一项
            htmlStr += `<a>${item.title}</a>`
          }
        })
        // 把内容作为class=conPoin的内容
        var crumbEle = document.querySelector('.con .conPoin')
        crumbEle.innerHTML = htmlStr
      }
    </script>
  </body>
</html>
